@charset "utf-8";
//图片轮播
.lunbo{
    width: 100%;
    height: 220px;
    >img{
        height: 220px;
        width: 100%;
    }
}
//产品内容
.listcommon{
       background: #cac9c9;
       text-align: center;
       cursor: pointer;
       color: black;
       font-size: 24px;
       float: left;
       padding-top: 40px;
       margin-right: 5px;
       position: relative; 
       height: 90px;
       transition: all 0.8s ;
    } 
.products{
    width: 975px;
    height: 1185px;
    margin: 0 auto;
    padding: 20px 0;
    overflow: hidden;
    margin-bottom: 290px;
    >ul{
        display: block;
        margin-left: 10px;
        >li{
            float: left;
            margin-right: 7px;
            color: #626262;
            >a{
                color: #626262;
                font-size: 14px;
            }
        }
        >li::after{
            content: ">";
            margin-left: 7px;
        }     
    }
    >ul::after{
        content: "";
        display: block;
        clear: both;
    }
    >.list{
        width: 967px;
        height: 130px;
        margin-left: 8px;
        margin-top: 35px;   
                 
        >.gaoqing{
            width: 290px;
            @extend .listcommon;       
            &:hover{
                background: #2072f9;
                color: white;
                width: 352px;
                >.icon-jiantou1{
                    display: block;
                }
            }
            &:hover ~div{
                width: 200px;//62px
            }
            >.icon-jiantou1{
                color: white;
                position: absolute;
                left: 50%;
                margin-left: -15px;      
                top: 75px;
                font-size: 30px;
                display: none;
            }
        }
        >.biaoqing{
            width: 207px;
            @extend .listcommon;  
            &:hover{
                background: #2072f9;
                color: white;
                width: 257px;
                >.icon-jiantou1{
                    display: block;
                }
            }
            &:hover ~div{
                width: 200px;//
            }
            >.icon-jiantou1{
                color: white;
                position: absolute;
                left: 50%;
                margin-left: -15px;      
                top: 75px;
                font-size: 30px;
                display: none;
            }
            
        }
        >.huwai{
            width: 223px;
            @extend .listcommon;  
            &:hover{
                background: #2072f9;
                color: white;
                width: 255px;
                >.icon-jiantou1{
                    display: block;
                }
            }
            &:hover ~div{
                width: 200px;//
            }
            >.icon-jiantou1{
                color: white;
                position: absolute;
                left: 50%;
                margin-left: -15px;      
                top: 75px;
                font-size: 30px;
                display: none;
            }
        }
        >.shinei{
            width: 222px;
            @extend .listcommon;  
            margin-right: 0;
            &:hover{
                background: #2072f9;
                color: white;
                >.icon-jiantou1{
                    display: block;
                }
            }
            >.icon-jiantou1{
                color: white;
                position: absolute;
                left: 50%;
                margin-left: -15px;      
                top: 75px;
                font-size: 30px;
                display: none;
            }
        }
    }
    .search{
        margin-top: 30px;
        width: 358px;
        height: 47px;
        background: #434343;
        padding: 1px 0;
        margin-left: 617px;
        >input[type="text"]{
            width: 300px;
            height: 47px;
            border: 0;
            margin-left: 1px;
            vertical-align: top;
        }
        >.icon-fangdajing{
            color: white;
            font-size: 30px;
            vertical-align: top;
            cursor: pointer;
            margin-left: 10px;
            display: inline-block;
            margin-top: 5px;
        }
    }
    .message{
        height: 809px;
        width: 975px;
        margin-top: 25px;
        >.product:first-child{
            border-left: 1px solid #dcdcdc;
        }
        >.product:nth-child(4){
            border-left: 1px solid #dcdcdc;
        }
        >.product:nth-child(7){
            border-left: 1px solid #dcdcdc;
            border-top: 1px solid #DCDCDC;
        }
        >.product:nth-child(8){
            border-top: 1px solid #DCDCDC;
        }
        >.product:nth-child(9){
            border-top: 1px solid #DCDCDC;
        }
        >.product{
            width: 323px;
            height: 268px;
            border-right: 1px solid #dcdcdc;
            float: left;
            text-align: center;
            cursor: pointer;
            border-top: 1px solid #DCDCDC;
            
            >img{
                width: 160px;
                height: 160px;
                transition: all 0.5s;
                &:hover{
                    transform: scale(1.5);
                }
            }
            >p{
                font-size: 18px;
                color: #2072f9;
            }
            >span{
                font-size: 12px;
            }
        }
    }
    >.yema{
        width: 480px;
        height: 50px;
        margin: 0 auto;
        margin-top: 55px;
        >ul{
            >li{
               width: 60px;
               height: 48px;
               text-align: center;
               line-height: 48px; 
               float: left;
               background: white;
               cursor: pointer;
               color: #8d8c8c;
               &:hover{
                   color: white;
                   background: #2072f9;
               }
                   
            }
        }
    }
}

